<template>
	<view>
		<dsl-navbar title="修改提现密码" bgTopImg="white" isBack=""></dsl-navbar>
		<!-- <view class="solid-bottom bg-white padding">
			<view>
				真实姓名
			</view>
			<view class="margin-top-xs">
				<input type="text" value="" placeholder="请输入您的真实姓名" placeholder-style="color:#BAB2D4" />
			</view>
		</view> -->
		<view class="solid-bottom bg-white padding">
			<view>
				提现姓名
			</view>
			<view class="margin-top-xs">
				<input type="text" value="" placeholder="请输入您的支付宝账号" :disabled='true' placeholder-style="color:#BAB2D4"
					v-model="realName" />
			</view>
		</view>
		<view class="solid-bottom bg-white padding">
			<view>
				绑定支付宝手机号
			</view>
			<view class="margin-top-xs">
				<input type="text" value="" placeholder="请输入您绑定支付宝手机号" :disabled='true'
					placeholder-style="color:#BAB2D4" v-model="account" />
			</view>
		</view>
		<view class="solid-bottom bg-white padding">
			<view>
				验证码
			</view>
			<view class="margin-top-xs align-center rowsb">
			<input type="" password="" value="" placeholder="请输入验证码" placeholder-style="color:#BAB2D4"
				style="width: 200rpx;"  v-model="msgCode"/>
				<view class="submit_code" @click="code">
					{{count || '获取验证码'}}
					
				</view>
				
			</view>
		</view>
		<view class="solid-bottom bg-white padding">
			<view>
				新密码
			</view>
			<view class="margin-top-xs">
				<input type="text" value="" placeholder="请输入密码" placeholder-style="color:#BAB2D4"
					v-model="withdrawalPassword" />
			</view>
		</view>
		<view class="solid-bottom bg-white padding">
			<view>
				确认密码
			</view>
			<view class="margin-top-xs">
				<input type="text" value="" placeholder="请再次输入密码" placeholder-style="color:#BAB2D4"
					v-model="withdrawalPassword2" />
			</view>
		</view>
		<view class="submit" @click="submit()">
			确定
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				account: '', //手机号
				withdrawalPassword: '', //新密码
				withdrawalPassword2: '', //2次密码
				realName: '', //姓名
				msgCode: '', //验证码
				count:'',//倒计时
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {
			this.getAccount()
		},
		watch: {
			accountData(res) {
				let v = this
				v.realName = res.realName
				v.account = res.account
				if (v.account) {
					v.isWithdraw = false
				}
			}
		},
		methods: {
			/**
			 * getAccount 查询账户
			 */
			...mapActions('money', ['getAccount']),
			/**
			 * resetWithdrawalPassword 忘记提现密码
			 */
			...mapActions('login', ['resetWithdrawalPassword', 'sendMessage']),
			//倒计时
			code() {
				this.sendMessage({
				mobile:this.account,
				msgType:2
				}).then(res => {
					if(res ==0){
						this.getCode()
					}
				})
				 
			},
			getCode() {
				const TIME_COUNT = 1;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count -= 1;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},

			//提交
			submit() {
				let v = this.$tools.showToast
				if (!this.withdrawalPassword) {
					v('请输入新密码')
					return
				}
				if (this.withdrawalPassword != this.withdrawalPassword2) {
					v('两次密码不一致')
					return
				}
				if (this.msgCode == '') {
					v('请输入验证码')
					return
				}
				this.resetWithdrawalPassword({
					mobile: this.account, //手机号
					msgCode: this.msgCode, //验证码
					withdrawalPassword: this.withdrawalPassword, //密码
				})
			}
		},
		computed: {
			/**
			 * 查询 
			 */
			...mapState('money', ['accountData']),
		},
		components: {},
	}
</script>

<style>
	.submit_code {
		width: 190rpx;
		height: 60rpx;
		border: 2rpx solid #EAA019;
		opacity: 1;
		border-radius: 99rpx;
		color: #EAA019;
		line-height: 60rpx;
		text-align: center;
	}

	.submit {
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		line-height: 90rpx;
		color: white;
		text-align: center;
		border-radius: 99rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
</style>
